<template>
  <div>
      <van-pull-refresh v-model="isLoading" success-text="刷新成功" @refresh="onRefresh">
        <van-grid :column-num="2" :gutter="2" :center="false" :border="false">
          <van-grid-item v-for="value in goodsList" :key="value.id" @click="getOneGoods(value.id)">
           
            <div class="goodsBox">
              <div class="GoodsImgBox">
                <van-image class="GoodsImg" :src="value.img_url" width="98%" />
              </div>
              <div class="van-multi-ellipsis--l2">{{value.title}}</div>
              <div style="width:100%;height:50px;background:#eee">
                <p class="goodListPrice">
                  ￥2195
                  <del style="color:#333">1321</del>
                </p>
                <p class="goodspan">
                  热卖中
                  <span>剩余60件</span>
                </p>
              </div>
            </div>
          </van-grid-item>
        </van-grid>
      </van-pull-refresh>
   
  </div>
</template>
<script>
// 引入vuex的state
import { mapMutations } from "vuex";
export default {
  data() {
    return {
      // 商品列表数组
      goodsList: [],
      //商品页码
      pagenum: 1,
      //下拉刷新控制属性
      isLoading: false,
      //控制底部懒加载
      loading:false,
      //是否全部加载完成
      finished:true,
      //
    };
  },
  created() {
    this.getGoodsList();
  },
  methods: {
    
    // 结构vuex的方法
    ...mapMutations(["setCurrentGoodsId"]),
    // 获取商品列表数据
    async getGoodsList() {
      const res = await this.$axios.get(
        `/api/getgoods?pageindex=${this.pagenum}`
      );
      if (res.status !== 200) return alert("获取商品列表信息失败");
      this.goodsList = res.data.message;
      this.isLoading = false;
    },
    async getOneGoods(id) {
      this.setCurrentGoodsId(id);
      this.$router.push("/goods/detail/" + id);
    },
    //下拉刷新触发函数
    onRefresh() {
      this.getGoodsList();
    },
    //底部加载触发
    onLoad(){
      console.log("load触发了");
      
    }
  }
};
</script>
<style scoped lang="less">
.van-cell {
  width: 50%;
  border: #ccc 1px solid;
  margin: 7px;
  float: left;
}
.goodsListTitle {
  font-size: 15px;
  //   line-height: 30px;
  //   white-space:nowrap;
  //   overflow: hidden;
  //   text-overflow: ellipsis;

  // //   width: 100%;
  //   height: 50px;
}
.goodsBox {
  border: 1px solid #ccc;
}
.van-grid{
  padding-bottom: 40px;
  padding-top: 40px;
}
.goodListPrice {
  color: red;
}
.van-multi-ellipsis--l2 {
  margin: 10px 0;
  padding: 0 4px;
}
.goodspan {
  font-size: 15px;
  line-height: 10px;
  padding: 0 4px;
  span {
    float: right;
  }
}
.GoodsImgBox {
  width: 100%;
  height: 0;
  padding-bottom: 100%;
  position: relative;
  .GoodsImg {
    display: block;
    position: absolute;
    width: 100%;
    height: 100%;
  }
}
.van-pull-refresh__track{
  padding-top: 30px;
}
</style>